<!--配对成功-->
<template>
    <div class="match-success">
        <div class="relative">
            <div class="content-box" :class="{'content-box-active':contentTansition}">
                <!--通用-->
                 <div v-if="vipType==0">
                    <div class="swiper-box" :class="vipCurrent==0?'swiper-red':vipCurrent==1?'swiper-purple':vipCurrent==2?'swiper-blue':vipCurrent==3?'swiper-yellow':vipCurrent==4?'swiper-mazarine':vipCurrent==5?'swiper-orange':vipCurrent==6?'swiper-neon':vipCurrent==7?'swiper-green':''">
                        <div class="close-btn"  @click.stop="closeMatchSuccess">
                            <image src="/static/image/close-icon.png" class="icon"></image>
                        </div>
                        <swiper
                            :indicator-dots="false"  
                            :circular="true"
                            :duration="800" 
                            :autoplay="vipSwiperAutoplay"
                            :current="vipCurrent" 
                            @change="userSwiperChange"
                            style="height:100%;width:100%;"
                            > 
                            <block v-for="(item,index) in swiperArr" :key="item">
                                <swiper-item  class="swiper-item"> 
                                    <div class="title text-center">获取 VIP</div>
                                    <div class="icon-box">
                                        <image class="icon" :src='item.icon'/>
                                    </div>
                                    <div class="vip-name text-center">{{item.title}}</div>
                                    <div class="vip-text text-center">{{item.text}}</div>
                                </swiper-item>
                            </block>   
                        </swiper>  
                        <div class="indicator text-center">
                            <span class="indicator-item " :class="{'indicator-color':index==vipCurrent}" v-for="(item,index) in swiperArr" :key="item"></span>
                        </div>
                    </div>  
                    <!--价格列表-->
                    <div class="price-box">
                        <div class="price-item text-center" :class="{'active-item':chooseItem==3}" @click.stop="choosePrice(3)">
                            <div class="border"  v-if="chooseItem==3"></div>
                            <div class="number">12</div>
                            <div class="unit">个月</div>
                            <div class="price">平均10元/月</div>
                        </div>
                        <div class="price-item  text-center" :class="{'active-item':chooseItem==2}" @click.stop="choosePrice(2)">
                            <div class="border"  v-if="chooseItem==2"></div>
                            <div class="number">6</div>
                            <div class="unit">个月</div>
                            <div class="price">平均16.66元/月</div>
                            <div class="save">节省 38%</div> 
                            <div class="position-title" v-if="chooseItem==2">最受欢迎</div>
                        </div>
                        <div class="price-item  text-center" :class="{'active-item':chooseItem==1}" @click.stop="choosePrice(1)">
                            <div class="border"  v-if="chooseItem==1"></div>
                            <div class="number">1</div>
                            <div class="unit">个月</div>
                            <div class="price">平均28元/月</div>
                        </div>
                    </div> 
                    <div class="footer-btn">
                        <div class="sub-btn text-center" @click.stop="subPay">继续</div>
                        <div class="share text-center" v-if="share"  @click.stop="shareBtn">
                            <button  class="tabbar-item" style="margin-left:0" open-type="share" data-name="pageShare" >
                                <image src="/static/image/share.png" class="share-icon"></image>
                                <span>免费获得</span>
                            </button >
                        </div>
                    </div>
                </div>
                <!--单独购买超级喜欢 和置顶-->
                <div  v-if="vipType==1||vipType==2">
                    <div class="swiper-box" :class="aloneType==0?'swiper-red':aloneType==1?'swiper-purple':aloneType==2?'swiper-blue':aloneType==3?'swiper-yellow':aloneType==4?'swiper-mazarine':aloneType==5?'swiper-orange':aloneType==6?'swiper-neon':aloneType==7?'swiper-green':''">
                        <div class="close-btn"  @click.stop="closeMatchSuccess">
                            <image src="/static/image/close-icon.png" class="icon"></image>
                        </div>
                        <div  class="swiper-item"  v-for="(item,index) in swiperArr" :key="item" v-if="aloneType==index">
                            <div class="title text-center">获取 VIP</div>
                            <div class="icon-box">
                                <image class="icon" :src='item.icon'  v-if="!topItem.is_top" />
                                <canvas style="width: 80px; height: 80px;" canvas-id="secondCanvas"  v-if="topItem.is_top"> 
                                </canvas> 
                            </div> 
                            <div class="vip-name text-center">{{item.title}}</div>
                            <div class="vip-text text-center">{{item.text}}</div>
                        </div>
                    </div>
                    <div class="price-box">
                        <div class="price-item text-center" :class="{'active-item':chooseItem==3}" @click.stop="choosePrice(3)">
                            <div class="border"  v-if="chooseItem==3"></div>
                            <div class="number">10</div>
                            <div class="unit">{{vipType==1?'个超级喜欢':'置顶'}}</div>
                            <div class="price">10元/个</div>
                        </div>
                        <div class="price-item  text-center" :class="{'active-item':chooseItem==2}" @click.stop="choosePrice(2)">
                            <div class="border"  v-if="chooseItem==2"></div>
                            <div class="number">5</div>
                            <div class="unit">{{vipType==1?'个超级喜欢':'置顶'}}</div>
                            <div class="price">8元/个</div> 
                            <div class="position-title" v-if="chooseItem==2">节省 20%</div>
                        </div>
                        <div class="price-item  text-center" :class="{'active-item':chooseItem==1}" @click.stop="choosePrice(1)">
                            <div class="border" v-if="chooseItem==1"></div>
                            <div class="number">1</div>
                            <div class="unit">{{vipType==1?'个超级喜欢':'置顶'}}</div>
                            <div class="price">10元/个</div>
                        </div>
                    </div>
                    <!--btn按钮-->
                    <div class="footer-btn">
                        <div class="sub-btn text-center" @click.stop="subPay">继续</div>
                        <div class="sub-btn top-btn text-center" @click.stop="topBtn"  v-if="aloneType==1&&(topItem.times>0&&!topItem.is_top)">开启一次置顶（剩下{{topItem.times}}次）</div>
                        <div class="share text-center" v-if="share&&aloneType==2"  @click.stop="shareBtn">
                            <button  class="tabbar-item" style="margin-left:0" open-type="share" data-name="pageShare" >
                                <image src="/static/image/share.png" class="share-icon"></image>
                                <span>免费获得</span>
                            </button >
                        </div>
                    </div>
                </div>
                 
            </div>

            <!--模态框-->
            <div class="vip-modul"  @click="closeMatchSuccess"></div>
        </div> 
    </div> 
</template>

<script>  
import * as api from '@/utils/api' ; 
export default {
    props: {
        //分享类型
        shareType:{
            default:1,  // 1 喜欢，2 超级喜欢， 3 回退，4 查看喜欢我的人 
            type:Number
        }, 
        //分享
        share:{
            default:false,
            type:Boolean 
        },
        //类型
        vipType:{ 
            default:0,  // 0 通用，1 超级喜欢 ,2 置顶
            type:Number, 
        },
        //轮播下标
        current:{ 
            default:0,  
            type:Number, 
        }, 
        aloneType:{
            default:-1,  // 2 超级喜欢 ,1 置顶
            type:Number, 
        }, 
        meLink:{
            default:'',
            type:String
        },
        topItem:{
            default:{},
            type:Object
        },
    },
    components: {  

    },
    data(){
        return { 
            contentTansition:false,
            vipCurrent:0,
            vipSwiperAutoplay:false,
            swiperArr:[
                {
                    icon:'https://ximi-jy.oss-cn-hangzhou.aliyuncs.com/quyue/image/home-like.png',
                    title:'点赞可将喜欢的人收藏起来关注！',
                    text:' 会员拥有无限点赞的超爽功能。',
                },
                {
                    icon:'https://ximi-jy.oss-cn-hangzhou.aliyuncs.com/quyue/image/home-stick.png',
                    title:'置顶推荐您的资料，曝光飙升8倍！',
                    text:' 会员每月可获得1次免费推荐。',
                },
                {
                    icon:'https://ximi-jy.oss-cn-hangzhou.aliyuncs.com/quyue/image/home-super-like.png',
                    title:'无需对方喜欢你即可与TA会话！',
                    text:' 会员每日有5次超级喜欢特权。',
                },
                {
                    icon:'https://ximi-jy.oss-cn-hangzhou.aliyuncs.com/quyue/image/home-withdraw.png',
                    title:'误操作了“跳过”的人再找回来！',
                    text:'会员拥有回撤的特殊权限。',
                },
                {
                    icon:'https://ximi-jy.oss-cn-hangzhou.aliyuncs.com/quyue/image/location-all.png',
                    title:'在全国范围内滑动配对',
                    text:'任一地点的通行证！',
                },
                {
                    icon:'https://ximi-jy.oss-cn-hangzhou.aliyuncs.com/quyue/image/management-switch.png',
                    title:'管理您的个人资料',
                    text:'限制他人可见的内容',
                },
                {
                    icon:'https://ximi-jy.oss-cn-hangzhou.aliyuncs.com/quyue/image/key-icon.png',
                    title:'看看谁收藏了我，谁喜欢了我。',
                    text:'会员可一目了然，尽收眼底。',
                },
                // {
                //     icon:'https://ximi-jy.oss-cn-hangzhou.aliyuncs.com/quyue/image/the-envelope.png',
                //     title:'短信沟通',
                //     text:'不在线不要紧，发送手机短信高效沟通',
                // }
            ],
            chooseItem:2,
            siginData:{},
            setTimeData : null,
            newDate:new Date()
        }
    }, 
    mounted() {
        let vm = this; 
        this.vipCurrent=this.current;
        // this.getSingKey();
        this.canvasDraw();
        // this.vipSwiperAutoplay=true;
        setTimeout(()=>{
            vm.contentTansition=true;
        },200)
    },
    methods:{  
        canvasDraw(){
            let vm = this;
            var date1=new Date(vm.topItem.end_time); 
            var date3=parseInt((date1.getTime()-vm.newDate.getTime())/1000);   //相差秒数  
            var animation_interval = 1000,// 每1秒运行一次计时器
                n = date3; // 当前倒计时 
            var step = 1,//计数动画次数
                num = 0,//计数倒计时秒数（n - num）
                start = 1.5 * Math.PI,// 开始的弧度
                end = (1.5-2/360*n*0.2) * Math.PI;// 结束的弧度 
            // 动画函数
            function animation () {  
                if (step <= n) {  
                    end = (1.5-2/360*n*0.2) * Math.PI;
                    ringMove(start, end);
                    step++;
                } else {
                    clearInterval(vm.setTimeData);
                }
            };
            // 画布绘画函数
            function ringMove (s, e) {
                var context = wx.createCanvasContext('secondCanvas')
            
                // 绘制圆环
                context.setStrokeStyle('#fff')
                context.beginPath()
                context.setLineWidth(6)
                context.arc( 40, 40, 35, s, e, true)
                context.stroke()
                context.closePath()
                
                // 绘制倒计时文本
                context.beginPath()
                context.setLineWidth(1)
                context.setFontSize(18)
                context.setFillStyle('#fff')
                context.setTextAlign('center')
                context.setTextBaseline('middle')
                context.fillText(vm.secondToDate(n - num) + '', 40, 40, 35)
                context.fill()
                context.closePath()
            
                context.draw()
                if(vm.secondToDate(n - num)=='0秒'){
                    vm.topItem.is_top=false;
                }
                // 每完成一次全程绘制就+1
                num++;
            }
            // 倒计时前先绘制整圆的圆环
            ringMove(start, end);
            // 创建倒计时m.h987yuitryuioihyhujik[jhgvfbnvnjmnbvbnm,nbvfcgklkjhg545545545u ]
            vm.setTimeData = setInterval(animation, animation_interval); 
        },
        //获取密钥

        // getSingKey(){
        //     let vm = this;
        //     let body={ 
        //         openid:wx.getStorageSync('openId')
        //     };
        //     if(this.vipType==0){
        //         body.goods_id = this.chooseItem;
        //     } else if(this.vipType==1){
        //         this.chooseItem==1?body.goods_id=4:this.chooseItem==2?body.goods_id=5:this.chooseItem==3?body.goods_id=6:0;
        //     } else if(this.vipType==2){
        //         this.chooseItem==1?body.goods_id=7:this.chooseItem==2?body.goods_id=8:this.chooseItem==3?body.goods_id=9:0;
        //     }
        //     api.postRecharge(body).then(res=>{
        //         if(res.data.code==300000){
        //            vm.siginData=res.data.data; 
        //         } 
        //     })
        // },

        subPay(){
            let vm = this; 
            let body={ 
                openid:wx.getStorageSync('openId')
            };
            if(this.vipType==0){
                body.goods_id = this.chooseItem;
            } else if(this.vipType==1){
                this.chooseItem==1?body.goods_id=4:this.chooseItem==2?body.goods_id=5:this.chooseItem==3?body.goods_id=6:0;
            } else if(this.vipType==2){
                this.chooseItem==1?body.goods_id=7:this.chooseItem==2?body.goods_id=8:this.chooseItem==3?body.goods_id=9:0;
            }
            api.postRecharge(body).then(res=>{
                if(res.data.code==300000){
                    vm.siginData=res.data.data; 
                    wx.requestPayment({
                        timeStamp: vm.siginData.timeStamp,
                        nonceStr: vm.siginData.nonceStr,
                        package: vm.siginData.package,
                        signType: 'MD5',
                        paySign: vm.siginData.paySign,
                        success:function(wxRes){
                            console.log(wxRes);
                            vm.$emit('successPay'); 
                        },
                        fail:function(wxRes){
                            // console.log(res);
                            // let url = `./../pay-result/main?payId=2`;
                            // wx.navigateTo({url})    
                        }
                    })
                } 
            })
            
        },
        userSwiperChange(e){ 
            this.vipCurrent=e.mp.detail.current;
        },
        closeMatchSuccess(){
            clearInterval(this.setTimeData);
            this.$emit('close');
        }, 

        //选择价格
        choosePrice(val){
            this.chooseItem=val;
            // this.getSingKey();
        }, 
        //分享
        shareBtn(){
            let vm = this;
            api.postShareType({share_type:parseInt(vm.shareType)}).then(res=>{
                if(res.data.code==300000){  }
            })
        },
        topBtn(){
            clearInterval(vm.setTimeData);
            this.$emit('topBtn');
        },
    }
}
</script>

<style scoped lang="scss">
.match-success{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%; 
    z-index:20000; 
    color:#fff;
    .relative{
        width:100%;
        height:100%;
        position:relative;
    }
    .content-box{   
        min-height:994rpx;
        max-height:1094rpx;
        width:702rpx;
        position:absolute;
        top:-100%;
        left:50%;
        margin-left:-351rpx;
        margin-top:-520rpx;
        background:#fff;
        border-radius:20rpx;
        z-index:20002;
        transition:all .5s; 
        .swiper-box{
            height:518rpx;
            width:100%; 
            border-radius:20rpx 20rpx 0 0;
            position:relative; 
            transition:all .3s;
            .close-btn{
                position:absolute;
                top:0;
                right:0;
                width:118rpx;
                height:118rpx;
                z-index:10;
                .icon{
                    width:100%;
                    height:100%;
                }
            }
            .swiper-item{
                padding-top:42rpx;
                color:#fff;
                font-family:PingFangSC-Regular;
                .title{
                    font-size:48rpx;
                    font-weight:500;
                }
                .icon-box{
                    width:160rpx;
                    height:160rpx;
                    margin:20rpx auto 26rpx;
                    .icon{
                        width:100%;
                        height:100%;
                    }
                }
                .vip-name{
                    font-size:32rpx; 
                    font-weight:500;
                }
                .vip-text{
                    font-size:32rpx; 
                    font-weight:500;
                }
            }
            .indicator{
                position:absolute;
                bottom:48rpx;
                left:0;
                width:100%;
                .indicator-item{
                    display:inline-block;
                    width:18rpx;
                    height:18rpx;
                    border:1rpx solid #fff;
                    border-radius:50%;
                    margin-right:8rpx;
                }
                .indicator-color{
                    background:#fff;
                }
            }
        }
        .swiper-red{
            background:linear-gradient(180deg,rgba(253,114,146,1) 0%,rgba(253,94,44,1) 100%);
            transition:all .6s;
        }
        //紫色
        .swiper-purple{ 
            background:linear-gradient(180deg,rgba(126,73,197,1) 0%,rgba(201,88,251,1) 100%);
            transition:all .6s;
        }
        //蓝色
        .swiper-blue{
            background:linear-gradient(360deg,rgba(25,203,251,1) 0%,rgba(28,136,222,1) 100%);
            transition:all .6s;
        }
        //黄色
        .swiper-yellow{
            background:linear-gradient(360deg,rgba(243,212,89,1) 0%,rgba(255,167,4,1) 100%);
            transition:all .6s;
        }
        //深蓝色
        .swiper-mazarine{
            background:linear-gradient(360deg,rgba(100,134,255,1) 0%,rgba(0,72,183,1) 100%);
            transition:all .6s;
        }
        //橙色
        .swiper-orange{
            background:linear-gradient(360deg,rgba(254,158,9,1) 0%,rgba(248,91,83,1) 100%);
            transition:all .6s;
        }
        //霓虹色
        .swiper-neon{
            background:linear-gradient(360deg,rgba(247,58,142,1) 0%,rgba(221,25,170,1) 100%);
            transition:all .6s;
        }
        //绿色
        .swiper-green{
            background:linear-gradient(360deg,rgba(67,210,112,1) 0%,rgba(30,217,103,1) 100%);
            transition:all .6s;
        }
        .price-box{
            height:272rpx;
            display:flex;
            align-items:center;
            justify-content:center; 
            background:#F3F5F7;
            border-bottom:1rpx solid #E7EBEF;
            box-sizing:border-box;
            .price-item{
                flex:1; 
                height:100%;
                color:#808892;
                font-family:PingFangSC-Medium;
                font-weight:500; 
                padding-top:24rpx;
                border-right:1rpx solid #E7EBEF;
                position:relative;
                box-sizing:border-box;
                .border{
                    position:absolute;
                    top:0;
                    left:0;
                    width:100%;
                    height:100%;
                    background:transparent;
                    border:6rpx solid #4A90E2 !important;
                    box-sizing:border-box;
                }
                .position-title{
                    position:absolute;
                    top:-20rpx;
                    left:50%;
                    margin-left:-83rpx;
                    height:40rpx;
                    width:166rpx;
                    line-height:40rpx;
                    font-size:24rpx;
                    color:#fff;
                    border-radius:18rpx;
                    background:#4A90E2;
                }
                &:last-child{
                   border-right:0; 
                }
                .number{
                    font-size:72rpx;
                    font-weight:bold;
                }
                .unit{
                    font-size:28rpx; 
                }
                .price{
                    font-size:32rpx; 
                }
                .save{
                    font-size:28rpx;
                }
            }
            .active-item{ 
                color:#4A90E2; 
            }
        }
        .footer-btn{
            .sub-btn{
                width:420rpx;
                height:90rpx;
                line-height:90rpx;
                background:linear-gradient(270deg,rgba(62,177,255,1) 0%,rgba(56,123,255,1) 100%);
                border-radius:45rpx;
                margin:58rpx auto 0;
                font-size:28rpx;
                &:active{
                    opacity:.8;
                }
            }
            .top-btn{
                background:linear-gradient(270deg,rgba(201,88,251,1) 0%, rgba(126,73,197,1) 100%);
                margin:35rpx auto !important;
            }
            .share{
                width:300rpx;
                padding:30rpx 0; 
                margin:10rpx  auto 20rpx;
                .tabbar-item{
                    padding-right:0;
                    padding-left:0;
                    background:transparent;
                    line-height:1; 
                }
                .share-icon{
                    width:36rpx;
                    height:36rpx;
                    vertical-align: middle;
                }
                span{
                    font-size:30rpx; 
                    color:#354052;
                }
            }
        } 
    }
    .content-box-active{
        top:50%;
        transition:all .3s;
    }
    .vip-modul{
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        background:rgba(50,50,50,0.7);
        z-index:20001;
    }
}

</style>
